<template>
    <el-row v-loading="loading">
    <el-col :span="24">
      <h1>膳食库</h1>
      <hr>
        <ssk-edit ref="sskEdit" :TmealsTypeList="TmealsTypeList" v-on:save-finished="gettmealsList()"></ssk-edit>
        <el-row :span="3">
          <el-col :span="2" style="text-align: right;">
          <el-button v-show="add" type="primary" icon="el-icon-plus" @click="addtmeals()">添加</el-button>
           </el-col>
           <el-col :span="5">
          <el-input placeholder="食品名称" size="small" v-model="likename">
          </el-input>
          </el-col>
        </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="gettmealsList(likename).slice((pageNum-1)*pageSize,pageNum*pageSize)" border size="mini" header-cell-class-name="header-row" :default-sort = "{prop: 'code', order: 'descending'}">
          <el-table-column prop="code" label="编码" sortable width="180"></el-table-column>
          <el-table-column prop="name" label="食品名称" header-align="center"></el-table-column>
            <el-table-column prop="tMealsType.name" label="所属类别" header-align="center"></el-table-column>
            <el-table-column prop="energy" label="100g含能量" header-align="center" align="center"></el-table-column>
            <el-table-column prop="protein" label="蛋白质含量" header-align="center" align="center"></el-table-column>
            <el-table-column prop="fat" label="脂肪含量" header-align="center" align="center"></el-table-column>
            <el-table-column label="操作" header-align="center" align="center" width="200">
              <template slot-scope="scope">
                <el-button v-show="edit" type="primary" size="mini" class="el-icon-edit"
                  @click="handleEditssk(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            :current-page.sync="pageNum"
            :page-sizes="[2,4,6,8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="TmealsList.length">
          </el-pagination>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import {TmealsQueryAll,TmealsTypeQueryAll,TmealsqueryByID} from '@/api/shanshiku_tj'
import sskEdit from '@/components/shanshiku/sskEdit'
export default {
 data() {
    return {
      loading: false,
      add:true,
      edit:true,
      TmealsList:[],
      pageSize:2,//每页显示的条数
      pageNum:1,
      likename:"",
      TmealsTypeList:""
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.gettmealsList();
    },
     gettmealsList(likename) {
      return this.TmealsList.filter((item,i)=>{
					//包含 includes 的意思
				if(item.name.includes(likename)){
								return item;
							}
						})
    },
    async pageInit(){
      try {
        let [listlibResp,listTypeResp] = await Promise.all([
            TmealsQueryAll(),
            TmealsTypeQueryAll()
        ])
        this.TmealsList=listlibResp.data
        this.TmealsTypeList=listTypeResp.data
      } catch(error) {
       console.log(error)
      }
    },
    handleEditssk(row) {
      this.loading = true
      TmealsqueryByID(row.id)
      .then(response => {
        this.$refs.sskEdit.$emit('openEditDialog',response.data)
        this.loading = false
      })
      .catch(error => {
        console.log(error)
      })
    },
    addtmeals(){
      this.$refs.sskEdit.$emit('openAddDialog')
    }
  },
  components: {sskEdit},
    created() {
      this.pageInit();
    }

}
</script>

<style lang="scss" scoped>
.search-row {
  padding-bottom: 8px;
  .el-input {
    width: 260px;
  }
}

.router-locked {
  color: red;
}
.router-not-locked {
  color: green;
}
</style>
